<template>
    <div>
        <!-- ref -->
        <p>年龄：{{age}}</p>
        <button @click="age++">增加年龄</button>
        <!-- reactive -->
         <p>姓名：{{ user.name }}</p>
         <input type="text" v-model="user.name">
          <p>城市：{{ user.city }}</p>
         <input type="text" v-model="user.city">
         <p>邮箱：{{ email }}</p>
         <input type="text" v-model="user.email">
    </div>
</template>
<script setup>
import { reactive, ref  } from 'vue';
const age=ref(20);
const user=reactive({
    name:"刘洋",
    city:"北京",
    email:"123456@163.com"
})
//  1 age 21
setTimeout (()=>{
age.value=21;
user.name="刘洋",
user.city="呼和浩特",
user.email="15799987231@163.com"
},2000)
</script>
<style>
</style>